2 de septiembre de 2025Español

Explora la API Screen Wake Lock: una potente API web que te permite evitar que los dispositivos atenúen o bloqueen la pantalla. Mejora la experiencia del usuario en reproductores multimedia, aplicaciones de navegación y más.

API Screen Wake Lock: Prevención del Sueño de la Pantalla en Aplicaciones Web

La API Screen Wake Lock es una API web que permite a las aplicaciones web evitar que los dispositivos atenúen o bloqueen la pantalla. Esto es particularmente útil para aplicaciones donde la visibilidad continua de la pantalla es esencial, como reproductores multimedia, aplicaciones de navegación y aplicaciones que requieren la interacción del usuario durante períodos prolongados.

¿Por qué es importante Screen Wake Lock?

En el mundo actual, los usuarios esperan experiencias fluidas. Un dispositivo que atenúa o bloquea automáticamente la pantalla puede interrumpir estas experiencias, especialmente cuando los usuarios interactúan activamente con una aplicación web. Considera estos escenarios:

Reproducción de vídeo: Imagina ver una película o seguir un tutorial de cocina, y la pantalla se atenúa constantemente, lo que te obliga a tocar la pantalla para mantenerla activa. Esta es una experiencia frustrante.
Aplicaciones de navegación: Mientras conduces y utilizas una aplicación de navegación, la pantalla debe permanecer encendida para proporcionar indicaciones continuas. Una pantalla que se atenúa o se bloquea podría provocar que te pierdas giros y posibles riesgos de seguridad.
Aplicaciones de presentación: Presentar diapositivas o mostrar información importante requiere que la pantalla permanezca activa durante toda la presentación.
Aplicaciones de juegos: Muchos juegos necesitan visibilidad ininterrumpida de la pantalla para jugar. El reposo de la pantalla puede interrumpir la experiencia de juego.
Pizarras blancas en línea: Colaborar en una pizarra blanca en línea requiere que la pantalla permanezca encendida para que los usuarios no tengan que tocar repetidamente para volver a interactuar.

La API Screen Wake Lock proporciona una solución a estos problemas, lo que permite a las aplicaciones web controlar el estado de encendido/apagado de la pantalla y proporcionar una experiencia más fluida y fácil de usar.

Compatibilidad del navegador

A finales de 2024, la API Screen Wake Lock disfruta de una sólida compatibilidad en los principales navegadores. Sin embargo, siempre es crucial verificar la información más reciente sobre compatibilidad del navegador en recursos como Mozilla Developer Network (MDN) y Can I use para garantizar una compatibilidad óptima entre navegadores. La compatibilidad del navegador puede variar según la versión del navegador y el sistema operativo.

Uso de la API Screen Wake Lock

La API Screen Wake Lock es relativamente sencilla de usar. Aquí hay un desglose de los pasos clave involucrados:

1. Comprobar la compatibilidad de la API

Antes de intentar usar la API, es esencial comprobar si el navegador del usuario la admite. Esto evita errores en los navegadores que no implementan la API.

            if ('wakeLock' in navigator) {
  // API Screen Wake Lock compatible
} else {
  // API Screen Wake Lock no compatible
  console.log('La API Screen Wake Lock no es compatible con este navegador.');
}

2. Solicitar un Wake Lock

Para solicitar un wake lock, utiliza el método navigator.wakeLock.request(). Este método devuelve una Promise que se resuelve con un objeto WakeLockSentinel si la solicitud es exitosa. El objeto WakeLockSentinel representa el wake lock activo.

            let wakeLock = null;

const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('¡Screen wake lock activo!');

    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock fue liberado');
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Llama a esta función para activar el wake lock
requestWakeLock();

En este ejemplo, la función requestWakeLock() intenta adquirir un screen wake lock. El argumento 'screen' especifica que queremos evitar que la pantalla se atenúe o se bloquee. Si la solicitud es exitosa, se registra un mensaje en la consola. El código también incluye un controlador de errores para detectar cualquier excepción que pueda ocurrir durante la solicitud de wake lock. Fundamentalmente, el código agrega un listener de eventos para escuchar el evento "release" que indica cuándo el Wake Lock ya no está activo. Esto podría suceder si el usuario ha liberado explícitamente el bloqueo o si el sistema lo ha reclamado debido a medidas de ahorro de energía.

3. Liberar el Wake Lock

Es crucial liberar el wake lock cuando ya no sea necesario. No hacerlo puede agotar la batería del dispositivo e impactar negativamente en la experiencia del usuario. Para liberar el wake lock, llama al método release() en el objeto WakeLockSentinel.

            const releaseWakeLock = async () => {
  if (wakeLock) {
    await wakeLock.release();
    wakeLock = null;
    console.log('¡Screen wake lock liberado!');
  }
};

// Llama a esta función para liberar el wake lock
releaseWakeLock();

Esta función libera de forma segura el wake lock y establece la variable wakeLock en null. Es esencial asegurarse de que la variable wakeLock se gestione correctamente para evitar errores al liberar el bloqueo.

4. Manejo de Eventos de Liberación de Wake Lock

El sistema puede liberar el wake lock por varias razones, como inactividad del usuario o batería baja. Es importante escuchar el evento release en el objeto WakeLockSentinel para manejar estas situaciones con elegancia. Esto te permite volver a solicitar el wake lock o tomar otras acciones apropiadas.

            wakeLock.addEventListener('release', () => {
  console.log('Screen Wake Lock fue liberado');
  // Intenta volver a solicitar el wake lock
  // o tomar otras acciones apropiadas
  requestWakeLock(); // Por ejemplo, volver a solicitar el wakelock
});

Este ejemplo muestra cómo escuchar el evento release y potencialmente volver a solicitar el wake lock. La implementación real dependerá de los requisitos específicos de tu aplicación.

Mejores prácticas y consideraciones

Si bien la API Screen Wake Lock es una herramienta poderosa, es esencial usarla de manera responsable y considerar las siguientes mejores prácticas:

Solicitar Wake Locks solo cuando sea necesario: Evita adquirir wake locks innecesariamente, ya que pueden agotar la batería del dispositivo. Solo solicita un wake lock cuando la visibilidad continua de la pantalla sea realmente esencial para la experiencia del usuario.
Liberar los Wake Locks rápidamente: Libera el wake lock tan pronto como ya no sea necesario. Esto ayuda a conservar la energía de la batería y evitar el agotamiento innecesario.
Manejar los eventos de liberación con elegancia: Prepárate para que el sistema libere el wake lock inesperadamente. Escucha el evento release y toma las medidas apropiadas, como volver a solicitar el wake lock o informar al usuario.
Proporcionar controles de usuario: Considera proporcionar a los usuarios controles para habilitar o deshabilitar la función de wake lock. Esto brinda a los usuarios más control sobre el consumo de energía de su dispositivo y les permite personalizar el comportamiento de la aplicación. Por ejemplo, un reproductor multimedia podría tener una palanca de "Mantener la pantalla encendida".
Considerar la duración de la batería: Ten en cuenta el impacto en la duración de la batería. Mantener la pantalla encendida continuamente puede reducir significativamente la duración de la batería, especialmente en dispositivos móviles. Informa a los usuarios sobre el impacto potencial y proporciona opciones para mitigarlo.
Permiso del usuario: Si bien la API en sí no solicita directamente el permiso del usuario, es una buena práctica notificar al usuario que la aplicación está impidiendo que la pantalla entre en reposo y permitirles deshabilitar este comportamiento.
Mecanismo de respaldo: Para navegadores que no admiten la API, considera implementar un mecanismo de respaldo. Esto podría implicar el uso de JavaScript para enviar periódicamente eventos ficticios a la pantalla para evitar que se atenúe o se bloquee. Sin embargo, ten en cuenta que este enfoque puede ser menos confiable y más intensivo en recursos que usar la API Screen Wake Lock.
Pruebas: Prueba a fondo tu aplicación en diferentes dispositivos y navegadores para asegurarte de que la API Screen Wake Lock funcione como se espera. Presta atención al consumo de batería y a la experiencia del usuario.
Accesibilidad: Ten en cuenta que mantener siempre la pantalla encendida podría ser problemático para algunos usuarios. Proporcionar formas de deshabilitar el bloqueo de activación de pantalla hace que tu aplicación sea más accesible.

Ejemplos del mundo real

Aquí hay algunos ejemplos del mundo real de cómo se puede usar la API Screen Wake Lock en diferentes aplicaciones:

Reproductores multimedia: Una aplicación de transmisión de video puede usar la API Screen Wake Lock para evitar que la pantalla se atenúe durante la reproducción, brindando una experiencia de visualización fluida.
Aplicaciones de navegación: Una aplicación de navegación puede usar la API para mantener la pantalla encendida mientras el usuario conduce, asegurando que las indicaciones siempre sean visibles.
Aplicaciones de presentación: Una aplicación de presentación puede usar la API para evitar que la pantalla se atenúe durante una presentación, asegurando que la audiencia siempre pueda ver las diapositivas.
Aplicaciones de fitness: Una aplicación de fitness que rastrea una sesión de ejercicios puede mantener la pantalla encendida para que los usuarios puedan ver rápidamente las métricas sin tener que desbloquear sus dispositivos.
Aplicaciones de recetas: Una aplicación de recetas puede usar la API para mantener la pantalla encendida mientras el usuario sigue una receta, evitando que la pantalla se atenúe mientras el usuario cocina.
Aplicaciones de quiosco: Las aplicaciones de quiosco se benefician de esta función. Por ejemplo, los quioscos de autoservicio en aeropuertos o restaurantes pueden usar la API Screen Wake Lock para garantizar que la pantalla permanezca activa y responda a las interacciones del usuario.
Aplicaciones de telemedicina: Durante las citas médicas virtuales, especialmente aquellas que requieren observación, se puede usar la API Screen Wake Lock para garantizar que la pantalla permanezca encendida durante toda la consulta.

Ejemplo de código: Reproductor multimedia con Screen Wake Lock

Este ejemplo demuestra cómo implementar la API Screen Wake Lock en una aplicación de reproductor multimedia simple.

            
<!DOCTYPE html>
<html>
<head>
  <title>Reproductor multimedia con Screen Wake Lock</title>
</head>
<body>
  <video id="myVideo" width="640" height="360" controls>
    <source src="your-video.mp4" type="video/mp4">
    Tu navegador no es compatible con la etiqueta de vídeo.
  </video>

  <button id="wakeLockBtn">Habilitar Screen Wake Lock</button>

  <script>
    const video = document.getElementById('myVideo');
    const wakeLockBtn = document.getElementById('wakeLockBtn');
    let wakeLock = null;

    const requestWakeLock = async () => {
      try {
        wakeLock = await navigator.wakeLock.request('screen');
        console.log('¡Screen wake lock activo!');
        wakeLockBtn.textContent = 'Deshabilitar Screen Wake Lock';

        wakeLock.addEventListener('release', () => {
          console.log('Screen Wake Lock fue liberado');
          wakeLockBtn.textContent = 'Habilitar Screen Wake Lock';
        });

      } catch (err) {
        console.error(`${err.name}, ${err.message}`);
      }
    };

    const releaseWakeLock = async () => {
      if (wakeLock) {
        await wakeLock.release();
        wakeLock = null;
        console.log('¡Screen wake lock liberado!');
        wakeLockBtn.textContent = 'Habilitar Screen Wake Lock';
      }
    };

    wakeLockBtn.addEventListener('click', () => {
      if (wakeLock) {
        releaseWakeLock();
      } else {
        requestWakeLock();
      }
    });

    // Opcional: Solicitar automáticamente el wake lock cuando el vídeo comienza a reproducirse
    video.addEventListener('play', () => {
        if(!wakeLock){
            requestWakeLock();
        }
    });

  </script>
</body>
</html>

Este código crea un reproductor multimedia simple con un botón para habilitar o deshabilitar el screen wake lock. Cuando se hace clic en el botón, el código solicita un nuevo wake lock o libera el existente. El texto del botón se actualiza para reflejar el estado actual del wake lock. Este ejemplo también incluye un listener de eventos opcional que solicita automáticamente el wake lock cuando el video comienza a reproducirse. Nota: Reemplaza your-video.mp4 con la ruta real a tu archivo de video.

Consideraciones de seguridad

La API Screen Wake Lock está diseñada teniendo en cuenta la seguridad. Los navegadores implementan varias medidas de seguridad para evitar el abuso de la API. Por ejemplo, los navegadores pueden limitar la duración durante la cual se puede mantener un wake lock o requerir la interacción del usuario antes de otorgar un wake lock. Sigue siempre las mejores prácticas descritas anteriormente en este artículo para asegurarte de que estás utilizando la API de forma responsable y ética.

Alternativas a la API Screen Wake Lock

Antes de la API Screen Wake Lock, los desarrolladores a menudo empleaban "hacks" para evitar el reposo de la pantalla. Estos métodos generalmente no son confiables y no se recomiendan.

Elemento de vídeo No-Op: Insertar un elemento de video pequeño y silencioso en la página y reproducirlo continuamente. Esto engaña al sistema para que piense que se está reproduciendo contenido multimedia, evitando así el reposo. Esto consume muchos recursos.
Solicitudes AJAX ficticias: Enviar solicitudes AJAX periódicamente al servidor para mantener el dispositivo "activo". Este es un sustituto deficiente, ya que requiere mucha red y no es fiable.

Estos métodos no se recomiendan, ya que no son confiables y pueden afectar negativamente el rendimiento y la duración de la batería. La API Screen Wake Lock es la solución recomendada para evitar el reposo de la pantalla en aplicaciones web.

Conclusión

La API Screen Wake Lock es una herramienta valiosa para los desarrolladores web que desean crear experiencias de usuario fluidas y atractivas. Al evitar que los dispositivos atenúen o bloqueen la pantalla, puedes asegurarte de que tus aplicaciones permanezcan visibles y receptivas, incluso durante períodos prolongados de inactividad. Recuerda usar la API de manera responsable y seguir las mejores prácticas descritas en este artículo para evitar agotar la batería del dispositivo e impactar negativamente en la experiencia del usuario. A medida que la API se adopte más ampliamente, sin duda se convertirá en una parte esencial del conjunto de herramientas de desarrollo web. Adopta el poder de la API Screen Wake Lock para elevar tus aplicaciones web y brindar una experiencia más placentera a tus usuarios en todo el mundo.